<template>
  <div class="app" >
    <div style="margin:20px 20px auto;background-color: white;height: 380px">
      <!--添加按钮和导出文件-->
      <div class="btn_add" style="margin-bottom: 10px">
        <Button type="primary" @click="showAdd" shape="circle">
          <Icon type="plus-round"></Icon>
          添加用户
        </Button>
        <Button type="primary" shape="circle" @click="exportData()">
          <Icon type="ios-download-outline"></Icon>
          导出数据
        </Button>
      </div>
      <!--添加用户界面-->
      <Modal
        v-model="model2"
        title="用户信息添加">
        <Form :model="User" :label-width="80">
          <Form-item label="用户名称：">
            <Input v-model="User.username" placeholder="请输入姓名"></Input>
          </Form-item>
          <Form-item label="用户密码：">
            <Input type="password" v-model="User.password" placeholder="请输入密码"></Input>
          </Form-item>
          <Form-item label="用户角色">
            <Select v-model="User.role" placeholder="请选择角色">
              <Option label="管理员" value="1"></Option>
              <Option label="普通用户" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="身份证号：">
            <Input v-model="User.identity"  placeholder="请输入身份证号"></Input>
          </Form-item>
          <Form-item label="联系方式：">
            <Input v-model="User.phone" placeholder="请输入联系方式"></Input>
          </Form-item>
        </Form>
        <div style="margin-left: 350px">
          <Button type="info" @click="addUser()">添加</Button> &nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="dashed" @click="model2 = false">取消</Button>
        </div>
        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
      <!--表单-->
      <div class="table_row"><Table stripe border width="1100" :context="self" :columns="columns7" :data="Users" ref="table"></Table></div>
      <!--修改用户界面-->
      <Modal
        v-model="modal1"
        title="用户信息修改">
        <Form :model="pro" :label-width="80">
          <Form-item label="用户名称：">
            <Input v-model="pro.username" placeholder="请输入姓名"></Input>
          </Form-item>
          <Form-item label="用户密码：">
            <Input v-model="pro.password" placeholder="请输入密码"></Input>
          </Form-item>
          <Form-item label="用户角色">
            <Select v-model="pro.role" placeholder="请选择角色">
              <Option label="管理员" value="1"></Option>
              <Option label="普通用户" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="身份证号：">
            <Input v-model="pro.identity" placeholder="请输入身份证号"></Input>
          </Form-item>
          <Form-item label="联系方式：">
            <Input v-model="pro.phone" placeholder="请输入联系方式"></Input>
          </Form-item>
        </Form>
        <div>
          <div style="margin-left: 350px">
            <Button type="info" @click="updateUser()">修改</Button> &nbsp;&nbsp;&nbsp;&nbsp;
            <Button type="dashed" @click="model1 = false">取消</Button>
          </div>
        </div>

        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
    </div>
    <div style="margin-left: 25px">
      <!--分页-->
      <Page style="margin-top: 20px"  :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="Page" @on-page-size-change="pageSizes"></Page>
    </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      /*分页*/
      // 初始化信息总条数
      dataCount:0,
      // 每页显示多少条
      pageSize:6,
      /*回显的数据*/
      Users:[{}],
      //标题
      columns7: [
        {
          title:'用户编号',
          key:'id'
        },
        {
          title: '用户名称',
          key: 'username',
          // render: (h, data) => {
          //   return h('div', [
          //     h('img', {
          //       attrs: {
          //         src: require('@/assets/user.png')
          //       }
          //     }),
          //     h('span', data.row.username)
          //   ]);
          // }
        },
        {
          title: '用户密码',
          key: 'password'
        },
        {
          title:'用户角色',
          key:'role'
        },
        {
          title: '身份证号',
          key: 'identity'
        },
        {
          title: '联系方式',
          key:'phone'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
          render: (h, data) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.show(data.row.id)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(data.row.id)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      /*后台拿到的数据*/
      Date:[{}],

      /*权限*/
      arr:['普通用户','管理员'],
      modal1:false,
      model2:false,
      self: this,
      User:{},
      pro:{},
    };
  },
  methods: {

    /*导出数据*/
    exportData() {
      this.$refs.table.exportCsv({
        filename: 'data'
      });
    },
    /*查询所有用户*/
    findAll(){//查询所有
      let _this = this
      this.$axios.get("http://localhost:8089/user/getUser").then(function(res){
        _this.dataCount = res.data.length
        if(res.data.length < _this.pageSize){
          _this.Users = res.data
          _this.Date = res.data
        }else {
          _this.Users = res.data.slice(0,_this.pageSize);
          _this.Date = res.data
        }
        console.log(_this.Users)
      }).catch(function (err) {
        alert('查询失败')
      })
    },

    /*分页*/
    Page(index){
      let _start = ( index - 1 ) * this.pageSize;
      let _end = index * this.pageSize;
      this.Users = this.Date.slice(_start,_end);
    },
    pageSizes(pageSize){
      this.pageSize = pageSize;
      this.findAll()
    },
    /*打开添加用户界面*/
    showAdd(){
      this.model2 = true
    },
    /*添加用户*/
    addUser(){
      if(!this.User.username){alert('请输入用户名称');return false}
      if(!this.User.password){alert('请输入用户密码');return false}
      if(!this.User.role){alert('请选择用户角色');return false}
      if(!this.User.identity){alert('请输入身份证号');return false}
      if(!this.User.phone){alert('请输入联系方式');return false}
      console.log(this.User)
      let _this = this
      this.$axios.post("http://localhost:8089/user/setUser",this.User).then(function () {
        //清空本次保存数据
        alert("用户信息添加成功！")
        _this.User = {};
        _this.dialogFormVisible = false
        _this.findAll();
      }).catch(function (err) {
        alert("用户信息添加失败，请稍后再试")
      })
    },
    /*打开修改界面，根据id查询用户*/
    show(index) {
      this.modal1 = true
      let _this = this
      this.$axios.get("http://localhost:8089/user/getUserById/"+index).then(function(res){
        _this.pro = res.data
        console.log(res.data)
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*更新用户*/
    updateUser(){
      let _this = this
      // 发送axios请求，根据查询一个
      this.$axios.post("http://localhost:8089/user/updateUser",_this.pro).then(function (res) {
        alert('用户信息修改成功!')
        _this.modal1 = false
        _this.findAll();
      }).catch(function (err) {
      })
    },
    /*删除用户*/
    remove(id) {
      let _this = this
      console.log(id)
      if(window.confirm('确定要删除用户吗？')){
        // 发送axios请求，根据查询一个
        this.$axios.post("http://localhost:8089/user/deletedById/"+id).then(function () {
          _this.findAll();
          alert("用户删除成功！")
        }).catch(function (err) {
          console.log(id)
          alert("删除失败,请联系管理员！")
        })
      }
    },
  },
  //初始化阶段 brforeCreate 内部事件 生命周期
  created(){
    this.findAll();

  }
};
</script>

<style scoped>


</style>
